<template>
  <div class='goodsInfo'>
    <div class="goods-nav font42">
      <div>商品详情-{{goodsInfo.title}}</div>
    </div>
    <div class="goBack font30" @click="goBack">返回</div>
    <div class="linelblong">
    </div>
    <div class="bottomBox">
      <div class="bottom-left">
        <div class="imgMain">
          <!--<img src="" alt="">-->
          {{imgMain}}
        </div>
        <div class="imgMore">
          <div v-for="img,index in imgMore" @click="changeMain(index)">{{img}}</div>
        </div>
        <div class="imgSku">
        </div>
      </div>
      <div class="bottom-center">
        <div class="description">
          <div class="hasBuy">
            <span class="icon"></span>
            <span class="font30">天猫 人 已购</span>
          </div>
          <div class="title font42">魅可时尚唇膏</div>
          <div class="price font42">￥ 170</div>
        </div>
        <div class="line"></div>
        <div class="commit">
          <div class="words">
            <span>划算(88)</span><span>质量蛮好(88)</span><span>颜色很正(88)</span><span>划算(88)</span>
          </div>
          <div class="userImgBox">
            <div class="userItem" v-for="item,index in userImgItem">
              <img src="" alt="">
              <div class="name">用户名</div>
            </div>
          </div>
          <div class="plBox">
            <div class="trigon">
              <div class="tri1"></div>
              <div class="tri2"></div>
            </div>
            <p class="pl"></p>
            <div class="plImg"></div>
            <button
              style="width: 2rem;font-size: 0.42rem;line-height: 0.42rem;padding: 0;margin: 1rem auto;display: block;"
              @click="popCover">弹窗
            </button>
          </div>
        </div>
      </div>
      <div class="bottom-right">
        <div class="qrcode"></div>
        <p class="font42">打开手淘扫码购买</p>
      </div>
    </div>
    <cover-box v-if="isShowCover"></cover-box>
  </div>
</template>
<script>
  import {fetchData} from '../../common/js/ajax.js'
  import coverBox  from './coverBox.vue'
  export default {
    props: {},
    data(){
      return {
        goodsInfo: {},
        imgMain:1,
        imgMore:[1,2,3],
        isShowCover:false,
        userImgItem:[1,2,3,4,5]
      }
    },
    beforeCreate(){
    },
    created(){

    },
    beforeMount(){
    },
    mounted(){
      var _that = this;
      fetchData("static/json/detail.json", "get", function (msg) {
        _that.goodsInfo = msg.data;
      });
    },
    beforeDestroy(){
    },
    destroyed(){
    },
    methods: {
      popCover: function () {
        this.isShowCover=true;
      },
      goBack: function () {
        window.history.go(-1);
      },
      changeMain: function (index) {
        this.imgMain=this.imgMore[index];
      }
    },
    components: {
      coverBox
    }
  }
</script>
<style scoped>
  .goodsInfo {
    width: 23rem;
    height: 15.65rem;
    float: left;
  }

  .linelblong {
    height: 0.37rem;
    margin: 0.25rem 0 0 0;
    border-left: 0.04rem solid white;
    border-bottom: 0.04rem solid white;
  }

  .goods-nav {
    height: 0.42rem;
  }

  .bottomBox {
    width: 23rem;
    height: 13.7rem;
    margin-top: 0.88rem;
  }
  .bottomBox .bottom-center{
    margin-top:0.12rem;
  }
  .bottomBox > div {
    float: left;
  }

  .bottom-left {
    width: 5.20rem;
  }

  .bottom-left .imgMain {
    width: 5.14rem;
    height: 5.14rem;
    background: #d8d8d8;
    border: 0.03rem solid rgba(255, 255, 255, 0.8);
  }

  .bottom-left .imgMore {
    margin: 0.34rem 0 0.67rem 0;
    height: 1.5rem;
    width: 5.2rem;
  }

  .bottom-left .imgMore div {
    float: left;
    height: 1.44rem;
    width: 1.44rem;
    border: 0.03rem solid rgba(255, 255, 255, 0.8);
  }

  .bottom-left .imgMore div:nth-child(2) {
    margin: 0 0.35rem 0;
  }

  .bottom-left .imgSku {
    height: 1.3rem;
    background-color: #fff;
  }

  .bottom-center {
    width: 10.26rem;
    height: 5rem;
    margin: 0 2.46rem 0 1.31rem;
  }

  .bottom-center .description {
    height: 2.2rem;
  }

  .bottom-center .description .hasBuy {
    height: 0.52rem;
  }

  .bottom-center .description .title {
    margin: 0.34rem 0 0.31rem 0;
    height: 0.48rem;
  }

  .bottom-center .description .price {
    height: 0.6rem;
  }
/*评论窗口样式*/
  .plBox {
    /*border: 0.02rem solid #fff;*/
    width: 10.3rem;
    height: 4.03rem;
    background:url("/static/image/pl1.png ") no-repeat center center;
    background-size: 100% 100%;
    margin-top: 0.34rem;
    position: relative;
    /*overflow: hidden;*/
    /*box-sizing: border-box;*/
    display: inline-block;
    /*background: #fff;*/
  }
/*  .plBox::before {
    content: "";
    position: absolute;
    bottom: 99.99%;
    width: 0;
    left: -0.01rem;
    height: 0;
    border-left: 0.3rem dashed transparent;
    border-bottom: 0.3rem dashed #fff;
    border-right: 0.3rem dashed transparent;

  }

  .plBox::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0.03rem;
    width: 0;
    height: 0;
    border-left: 0.28rem dashed transparent;
    border-bottom: 0.28rem dashed transparent;
    border-right: 0.28rem dashed transparent;

  }*/

  .line {
    margin-top: 0.68rem;
    border: 0.02rem solid #a8a8a8;
    /*    box-shadow: inset 0 0.01rem 0.03rem 0 rgba(0, 0, 0, 0.50);
        -webkit-box-shadow: inset 0 0.01rem 0.03rem 0 rgba(0, 0, 0, 0.50);*/
    width: 10.28rem;
    height: 0;

  }

  .bottom-center .commit {
    height: 7.2rem;
    margin: 1.2rem auto 2.18rem 0;
  }

  .bottom-center .commit .words {
    height: 0.7rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .bottom-center .commit .words span {
    display: inline-block;
    height: 0.7rem;
    background: #ffffff;
    border: 0.02rem solid rgba(255, 255, 255, 0.78);
    padding: 0 0.23rem;
    line-height: 0.7rem;
    box-sizing: border-box;
    font-size: 0.32rem;
    margin-right: 0.6rem;
    color: black;
  }

  .bottom-center .commit .words span:last-child {
    margin-right: 0;
  }

  .userImgBox {
    height: 1.42rem;
    margin-top: 0.64rem;
  }

  .bottom-center .commit .userItem {
    height: 1.42rem;
    width: 1.06rem;
    float: left;
    margin-right: 0.87rem;
  }

  .bottom-center .commit .userItem img {
    display: block;
    width: 1rem;
    height: 1rem;
    border: 0.03rem solid #fff;
    background: #d8d8d8
  }

  .bottom-center .commit .userItem .name {
    font-size: 0.24rem;
    height: 0.24rem;
    margin-top: 0.12rem;
  }


  .bottom-right {
    width: 3.54rem;
    background: red;
  }

  .bottom-right .qrcode {
    height: 4.15rem;
    width: 3.54rem;
    background: #fff;
  }

  .bottom-right p {
    text-align: center;
    margin-top: 0.25rem;
  }

  .goBack {
    width: 1.3rem;
    height: 0.6rem;
    border: 0.02rem solid #ffffff;
    position: absolute;
    top: -0.11rem;
    left: 21.33rem;
    text-align: center;
    line-height: 0.6rem;
  }

  .bottom-center .commit
  .bottom-right {
    width: 3.54rem;
    background-color: #fff;
    height: 5rem;
  }
</style>
